<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 负荷仿真结果展示 -->
    <div style="top: 1%; width: 100%;height: 105vh;float: left;position: absolute;">


      <div class="box1">
        <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">电负荷</span></div>
        </div>
        <div id="echartsArea1" style="width: 100%; height: 90%; margin-top: 5px"></div>
      </div>


      <div class="box2">
        <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">冷负荷</span></div>
        </div>
        <div id="echartsArea2" style="width: 100%; height: 90%; margin-top: 5px"></div>
      </div>



      <div class="box3">
        <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">热负荷</span></div>
        </div>
        <div id="echartsArea3" style="width: 100%; height: 90%; margin-top: 5px"></div>
      </div>



    </div>


  </div>
</template>

<script type="text/ecmascript-6">

  //实时数据
  var option = {
    tooltip : {
      trigger : 'axis',
      formatter : function(params) {
        var result = params[0].name + '<br>';
        params.forEach(function(item) {
          result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
          if (item.data != undefined && item.data != ""
            && item.data != "-"
            && item.data != "--"
            && item.data != "'--'"
            && item.data != "null") {
            result += item.seriesName + ": " + '<span>'
              + parseFloat(item.data).toFixed(2)
              + "</span><br>"
          } else {
            result += item.seriesName + ": " + '<span>'
              + "-" + "</span><br>"
          }

        });

        return result;
      },
      axisPointer:{//指示线条颜色
        lineStyle:{
          color:'#ffffff',
        }
      }
    },
    grid : {
      left : '3%',
      right : '3%',
      bottom : '9%',
      top : '15%',
      containLabel : true
    },
    legend : {
      top : '3%',
      textStyle : {
        color : '#EBECF2' // 图例文字颜色
      },
      data : [ '逢时负荷(单位:千瓦)']
    },
    color : [ '#FFBB44', '#44E5FF', '#6FD088','#DD4B39', '#359CB6', '#1ABE67', '#F39C12', '#e03dda','#44e7ed'],
    xAxis : [ {
      type : 'category',
      boundaryGap : true,
      data : [ '0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点',
        '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点',
        '17点', '18点', '19点', '20点', '21点', '22点', '23点' ],
      axisLine : { // 坐标轴线
        show : true, // 默认显示，属性show控制显示与否
        lineStyle : { // 属性lineStyle控制线条样式
          color : '#99A4C8',
          width : 2,
          type : 'solid'
        }
      },
      axisTick : {//刻度相关
        show : true,
        inside : true,//刻度朝内
      },
      axisLabel : {//字体
        show : true,
        color : '#EBECF2',
      },
      splitArea : {
        show : true,
        areaStyle : {//x轴背景区域分块
          color : [ 'rgba(250,250,250,0.1)',
            'rgba(200,200,200,0)' ]
        },
      },
    } ],
    yAxis : [ {
      type : 'value',
      name : '',
      axisLine : { // 坐标轴线
        show : true, // 默认显示，属性show控制显示与否
        lineStyle : { // 属性lineStyle控制线条样式
          color : '#99A4C8',
          width : 2,
          type : 'solid'
        }
      },
      splitLine : {
        show : true,
        lineStyle : { // 属性lineStyle控制线条样式
          color : '#99A4C8',
          width : 2,
          type : 'solid'
        }
      },
      axisLabel : {//字体
        show : true,
        color : '#EBECF2',
      },
    } ],
    dataZoom: [{
      show: true,
      height:20,
      xAxisIndex: [0],
      bottom:15,

      "start": 20,
      "end": 80,
      handleSize: '110%',
      handleStyle: {
        color: "#409EFF",
      },
      textStyle:{
        color:"rgba(255,255,255,0.5)",
      },
      fillerColor:"rgba(64,158,255,0.2)",
      borderColor: "rgba(64,158,255,0.3)",

    }, {
      type: "inside",
      show: true,
      height: 15,
      start: 1,
      end: 35
    }],
    series : [ {
      name : '逢时负荷(单位:千瓦)' ,
      type : 'line',
      "connectNulls": true,   //将断点连接
      data : [ ],
      itemStyle : {
        normal : {
          lineStyle : {
            width : 3,
            type : 'solid'
          },
        }
      }
    } ]
  };

  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');
  var myChart1,myChart2,myChart3;

  export default {
    name: 'simulationResult',
    components: {

    },
    data () {
      return {

      }
    },
    mounted (){

      //项目id
      var projectId = this.$root.project_id;


      this.$http.post("/iepsapi/fhfz/sceneSettings/showSimulationResult?projectId="+projectId, {},{

      }).then((res) => {


        //电负荷
        myChart1 = echarts.init(document.getElementById('echartsArea1'));
        //冷负荷
        myChart2 = echarts.init(document.getElementById('echartsArea2'));
        //热负荷
        myChart3 = echarts.init(document.getElementById('echartsArea3'));

        myChart1.clear();
        myChart2.clear();
        myChart3.clear();


        //电负荷
        var option1 = this.cloneObj(option);
        //冷负荷
        var option2 = this.cloneObj(option);
        //热负荷
        var option3 = this.cloneObj(option);

        option2.legend.data[0] = '逢时负荷(单位:千焦)';
        option3.legend.data[0] = '逢时负荷(单位:千焦)';
        option2.series[0].name = '逢时负荷(单位:千焦)';
        option3.series[0].name = '逢时负荷(单位:千焦)';

        //解析返回的负荷仿真结果

        var simulationResult = res.data;

        if(simulationResult!=null){
            for(var i = 0;i<simulationResult.length;i++){
              var result = simulationResult[i];

              var type = result.type;
              var data = result.result;
              var time = result.time;


              if(type!=null&&data!=null&&time!=null){

                //电负荷
                if("electrical_load"==type){
                  option1.xAxis.data = time;
                  option1.series[0].data = data;
                 }else if("cooling_load"==type){
                  //冷负荷
                  option2.xAxis.data = time;
                  option2.series[0].data = data;
                }else if("heat_load"==type){
                  //热负荷
                  option3.xAxis.data = time;
                  option3.series[0].data = data;
                }

              }
            }
        }


        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);

        window.onresize = function(){
          myChart1.resize();
          myChart2.resize();
          myChart3.resize();
        }


      });


    },
    methods: {
      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          var val = obj[key];
          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },


    }
  }


</script>

<style scoped >



  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    height: 48vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    height: 48vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box3{
    position: relative;
    width: 100%;
    height: 48vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
